<template>
  <div class="theater" v-title :data-title="$t('router.theaterTitle')">
    <div class="headNav">
      <!-- 演出类型 -->
      <div class="navs">
        <span v-text="typeList.typeName"></span>
        <el-menu
          :default-active="onRoutes1"
          class="el-menu-demo menu-one"
          mode="horizontal"
          text-color="#000"
          active-text-color="#A1322C"
          @select="handleSelect"
          router
        >
          <template v-for="item in typeList.liveCategories">
            <el-menu-item
              :index="item.liveCategoryId + ''"
              :route="{ params: { type: item.liveCategoryId } }"
              :key="item.liveCategoryId"
            >
              <span v-text="item.name"></span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <!-- 演出剧院 -->
      <div class="navs">
        <span v-text="theaterList.typeName"></span>
        <el-menu
          :default-active="onRoutes2"
          class="el-menu-demo menu-two"
          mode="horizontal"
          text-color="#000"
          active-text-color="#A1322C"
          @select="handleSelect"
          router
        >
          <template v-for="item in theaterList.liveCategories">
            <el-menu-item
              :index="item.liveCategoryId + ''"
              :route="{ params: { theater: item.liveCategoryId } }"
              :key="item.liveCategoryId"
            >
              <span v-text="item.name"></span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <!-- 演出机构 -->
      <div class="navs">
        <span v-text="organizationList.typeName"></span>
        <el-menu
          :default-active="onRoutes3"
          class="el-menu-demo menu-three"
          mode="horizontal"
          text-color="#000"
          active-text-color="#A1322C"
          :data-name="organizationList.typeName"
          @select="handleSelect"
          router
        >
          <template v-for="item in organizationList.liveCategories">
            <el-menu-item
              :index="item.liveCategoryId + ''"
              :route="{ params: { organization: item.liveCategoryId } }"
              :key="item.liveCategoryId"
            >
              <span v-text="item.name"></span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </div>
    <div class="list">
      <video-list
        :videoList="videoList"
        :diff="'theater'"
        v-loading="fullscreenLoading"
      >
      </video-list>
    </div>
    <nice-empty
      v-show="videoList.length == 0 && fullscreenLoading == false"
      :emptyText="$t('public.noData')"
    ></nice-empty>
    <div class="page-wrap">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-size="params.pageSize"
        background
        hide-on-single-page
        layout="total, prev, pager, next, jumper"
        :total="total"
        :small="isMobile"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import { createVideo } from "@/model/video";
import videoList from "@/components/common/videoList/Index";
export default {
  data() {
    return {
      typeList: {}, //演出类型
      theaterList: {}, //演出剧院
      organizationList: {}, //演出机构
      videoList: [],
      // 请求参数
      params: {
        // 返回数量
        pageSize: 30,
        // 当前页数
        pageNum: 1,
        liveCategories: [
          {
            type: 1,
            liveCategoryId: this.$route.params.type,
          },
          {
            type: 2,
            liveCategoryId: this.$route.params.theater,
          },
          {
            type: 3,
            liveCategoryId: this.$route.params.organization,
          },
        ],
      },
      //数据载入动画
      fullscreenLoading: true,
      //是否显示分页
      total: 0, //总条数
    };
  },
  components: {
    videoList,
  },
  computed: {
    onRoutes1() {
      return this.$route.params.type + "";
    },
    onRoutes2() {
      return this.$route.params.theater + "";
    },
    onRoutes3() {
      return this.$route.params.organization + "";
    },
    isMobile() {
      return this.$store.getters.isMobile;
    },
    isIE() {
      return this.$store.getters.isIE;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getLiveCategories();
  },
  methods: {
    handleSelect() {
      this.$nextTick(() => {
        this.params.pageNum = 1;
        this.params.liveCategories = [
          {
            type: 1,
            liveCategoryId: this.onRoutes1,
          },
          {
            type: 2,
            liveCategoryId: this.onRoutes2,
          },
          {
            type: 3,
            liveCategoryId: this.onRoutes3,
          },
        ];
        this.videoList = [];
        this.getLiveList();
      });
    },
    //分页 每页条数
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getLiveList();
    },
    //当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.videoList = [];
      this.getLiveList();
    },
    // 获取视频分类
    async getLiveCategories() {
      try {
        let res = await this.$api.theater.getLiveCategories({});
        if (res.code === 1000000 && res.source) {
          this.typeList = res.source[0];
          this.theaterList = res.source[1];
          this.organizationList = res.source[2];
        }
        this.getLiveList();
      } catch (e) {
        console.log(e);
      }
    },
    // 获取视频列表
    async getLiveList() {
      this.fullscreenLoading = true;
      try {
        let res = await this.$api.theater.getLiveList(this.params);
        if (res.code === 1000000) {
          this.videoList = res.source
            ? this.utils.processingData(this.videoList, res.source)
            : [];
          this.total = res.total;
          this.fullscreenLoading = false;
        } else {
          this.$message({
            showClose: true,
            message: this.$t("public.dataAcquisitionFailed"),
            type: "error",
          });
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.theater {
  .headNav {
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 20px;
    .navs {
      display: flex;
      margin-bottom: 10px;
      > span {
        line-height: 36px;
        color: #bbbbbb;
        white-space: nowrap;
      }
      .el-menu-demo {
        border-bottom-width: 0;
        > .el-menu-item {
          height: 36px;
          line-height: 36px;
          border-width: 0;
          &.is-active {
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
